Components

Forms

An HTML form contains interactive controls to submit information to a web server.

InputInput › DefaultInput › With icon to the leftInput › With icon to the rightInput › With icon to the left and rightInput › RequiredInput › ErrorInput › Error with iconInput › DisabledInput › Read onlyInput › With fixed textInput › Read only With fixed textInputdev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-01">Input Label</label>
  <div class="slds-form-element__control">
    <input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
  </div>
</div>

You can style the HTML <input> element to align with the Salesforce brand by using the .slds-input class on the <input> element.

The <input> element includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Accessibility

Inputs with errors should have aria-describedby to insure that the associated field level error message is read by assistive technology. If the error message has an id="my-error-message", then the input should have aria-describedby="my-error-message".

TextareaTextarea › DefaultTextarea › RequiredTextarea › ErrorTextarea › DisabledTextarea › Read onlyTextareadev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-form-element__label" for="textarea-input-01">Textarea Label</label>
  <div class="slds-form-element__control">
    <textarea id="textarea-input-01" class="slds-textarea" placeholder="Placeholder Text"></textarea>
  </div>
</div>

You can style the HTML <textarea> element to align with the Salesforce brand by using the class .slds-textarea on the <textarea> element.

RadioRadio › DefaultRadio › RequiredRadio › ErrorRadio › DisabledRadiodev ready

Preview

Code

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Radio Group Label</legend>
  <div class="slds-form-element__control">
    <span class="slds-radio">
      <input type="radio" id="radio-306" name="options" checked="" />
      <label class="slds-radio__label" for="radio-306">
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Radio Label One</span>
      </label>
    </span>
    <span class="slds-radio">
      <input type="radio" id="radio-307" name="options" />
      <label class="slds-radio__label" for="radio-307">
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Radio Label Two</span>
      </label>
    </span>
  </div>
</fieldset>

Radio buttons are shown in a group of two or more. The user can only select one radio button at a time. You should use the same name attribute on all radio buttons in the group. This ensures that if there is more than one group in the form, each one stays associated with its own group.

The ability to style radio buttons with CSS varies across browsers. To ensure that radio buttons look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.

Accessibility

Groups of radio buttons should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of radio buttons. The fieldset is placed around the whole group and the legend contains the question.

Custom radio buttons are created by applying the .slds-radio class to a <label> element. To remain accessible to all user agents, place an <input> with type="radio" inside the <label> element. The <input> is then visually hidden, and the styling is placed on a span with the .slds-radio--faux class. The styling of the span changes based on whether the radio button is selected or focused by using a pseudo-element. A second span with .slds-form-element__label contains the label text.

When a radio group is required, the <fieldset> should receive the class .slds-is-required. The <legend> should then get <abbr class="required" title="required">*</abbr> added to the DOM for visual indication that the radio group is required.

Radio Group AlternateRadio Group Alternate › DefaultRadio Group Alternate › Has errorRadio Group Alternate › DisabledRadio Group Alternatedev ready

Preview

Code

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-radio--button-group">
      <span class="slds-button slds-radio--button">
        <input name="radio" type="radio" id="monday" />
        <label class="slds-radio--button__label" for="monday">
          <span class="slds-radio--faux">Mon</span>
        </label>
      </span>
      <span class="slds-button slds-radio--button">
        <input name="radio" type="radio" id="tuesday" />
        <label class="slds-radio--button__label" for="tuesday">
          <span class="slds-radio--faux">Tue</span>
        </label>
      </span>
      <span class="slds-button slds-radio--button">
        <input name="radio" type="radio" id="wednesday" />
        <label class="slds-radio--button__label" for="wednesday">
          <span class="slds-radio--faux">Wed</span>
        </label>
      </span>
      <span class="slds-button slds-radio--button">
        <input name="radio" type="radio" id="thursday" />
        <label class="slds-radio--button__label" for="thursday">
          <span class="slds-radio--faux">Thu</span>
        </label>
      </span>
      <span class="slds-button slds-radio--button">
        <input name="radio" type="radio" id="friday" />
        <label class="slds-radio--button__label" for="friday">
          <span class="slds-radio--faux">Fri</span>
        </label>
      </span>
    </div>
  </div>
</fieldset>

CheckboxCheckbox › DefaultCheckbox › IndeterminateCheckbox › RequiredCheckbox › ErrorCheckbox › DisabledCheckbox › GroupCheckbox › Group RequiredCheckbox › Group with errorCheckbox › Group DisabledCheckboxdev ready

Preview

Code

<div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="options" id="checkbox-308" checked="" />
      <label class="slds-checkbox__label" for="checkbox-308">
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">Checkbox Label</span>
      </label>
    </span>
  </div>
</div>

The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.

Accessibility

Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question.

Custom checkboxes are created by applying the .slds-checkbox class to a <label> element. To remain accessible to all user agents, place <input> with type="checkbox" inside the <label> element. The <input> is then visually hidden, and the styling is placed on a span with the .slds-checkbox--faux class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with .slds-form-element__label contains the label text.

When a single checkbox is required, <div class="slds-checkbox"> should get <abbr class="required" title="required">*</abbr> added to the DOM, directly before the <input type="checkbox" /> for visual indication that the checkbox is required.

When a checkbox group is required, the <fieldset> should receive the class .slds-is-required. The <legend> should then get <abbr class="required" title="required">*</abbr> added to the DOM for visual indication that the checkbox group is required.

As SLDS checkboxes rely on the :checked psuedo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input.

The following JavaScript demonstrates how to set a checkbox to be indeterminate:

var checkbox = document.getElementById('checkbox-indeterminate-01');checkbox.indeterminate = true;

Checkbox ToggleCheckbox Toggle › DefaultCheckbox Toggle › CheckedCheckbox Toggle › DisabledCheckbox Toggledev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-checkbox--toggle slds-grid">
    <span class="slds-form-element__label slds-m-bottom--none">Toggle Label</span>
    <input name="checkbox" type="checkbox" aria-describedby="toggle-desc" />
    <span id="toggle-desc" class="slds-checkbox--faux_container" aria-live="assertive">
      <span class="slds-checkbox--faux"></span>
      <span class="slds-checkbox--on">Enabled</span>
      <span class="slds-checkbox--off">Disabled</span>
    </span>
  </label>
</div>

Checkbox AlternateCheckbox Alternate › DefaultCheckbox Alternate › Has errorCheckbox Alternate › DisabledCheckbox Alternatedev ready

Preview

Code

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-checkbox--button-group">
      <span class="slds-button slds-checkbox--button" for="monday">
        <input name="checkbox" type="checkbox" id="monday" />
        <label class="slds-checkbox--button__label" for="monday">
          <span class="slds-checkbox--faux">Mon</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="tuesday">
        <input name="checkbox" type="checkbox" id="tuesday" />
        <label class="slds-checkbox--button__label" for="tuesday">
          <span class="slds-checkbox--faux">Tue</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="wednesday">
        <input name="checkbox" type="checkbox" id="wednesday" />
        <label class="slds-checkbox--button__label" for="wednesday">
          <span class="slds-checkbox--faux">Wed</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="thursday">
        <input name="checkbox" type="checkbox" id="thursday" />
        <label class="slds-checkbox--button__label" for="thursday">
          <span class="slds-checkbox--faux">Thu</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="friday">
        <input name="checkbox" type="checkbox" id="friday" />
        <label class="slds-checkbox--button__label" for="friday">
          <span class="slds-checkbox--faux">Fri</span>
        </label>
      </span>
    </div>
  </div>
</fieldset>

SelectSelect › DefaultSelect › RequiredSelect › ErrorSelect › DisabledSelect › Multiple SelectionSelectdev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-form-element__label" for="select-01">Select Label</label>
  <div class="slds-form-element__control">
    <div class="slds-select_container">
      <select id="select-01" class="slds-select">
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
      </select>
    </div>
  </div>
</div>

The HTML <select> element presents a menu of options. The options within the menu are represented by <option> elements that you can group with <optgroup> elements. You can pre-select options for the user.

For a multiple options selections, adding the attribute multiple to the <select> will enable this functionality. Note, if you need multiple option selections, you will need to remove the <div class="slds-select_container"> from the DOM, otherwise you'll get display issues.

If you need more advanced styling, consider using a Picklist.

Multi SelectMulti SelectprototypeNot Compatible with S1 Mobile

Preview

Code

Code will be available when this component reaches a Dev-Ready state.

Multi Select picklists that allow for draggable options between picklists. Picklist options can also be re-ordered.

Horizontal FormHorizontal Formdev ready

Preview

Code

<div class="slds-form--horizontal">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="inputSample2">Text Input</label>
    <div class="slds-form-element__control">
      <input id="inputSample2" class="slds-input" type="text" placeholder="Placeholder Text" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="textareaSample2">Textarea Label</label>
    <div class="slds-form-element__control">
      <textarea id="textareaSample2" class="slds-textarea"></textarea>
    </div>
  </div>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="opportunities-ownership">
        <input name="default" type="checkbox" id="opportunities-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All opportunities owned by you</span>
      </label>
      <label class="slds-checkbox" for="contact-ownership">
        <input name="default" type="checkbox" id="contact-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All contacts in the account owned by you</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Radio Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-radio" for="lead">
        <input type="radio" name="options" id="lead" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Lead Generation</span>
      </label>
      <label class="slds-radio" for="education">
        <input type="radio" name="options" id="education" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Education Leads</span>
      </label>
    </div>
  </fieldset>
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="agree">
        <input name="default" type="checkbox" id="agree" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">I agree to the Terms &amp; Service</span>
      </label>
    </div>
  </div>
</div>

To horizontally align a <label> and <input>, use the .slds-form--horizontal class on the wrapper around the form. A .slds-form-element__label takes up 33% of the width, and the .slds-form-element__control uses the remaining 66%.

Stacked FormStacked Formdev ready

Preview

Code

<div class="slds-form--stacked">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="inputSample2">Text Input</label>
    <div class="slds-form-element__control">
      <input id="inputSample2" class="slds-input" type="text" placeholder="Placeholder Text" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="textareaSample2">Textarea Label</label>
    <div class="slds-form-element__control">
      <textarea id="textareaSample2" class="slds-textarea"></textarea>
    </div>
  </div>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="opportunities-ownership">
        <input name="default" type="checkbox" id="opportunities-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All opportunities owned by you</span>
      </label>
      <label class="slds-checkbox" for="contact-ownership">
        <input name="default" type="checkbox" id="contact-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All contacts in the account owned by you</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-radio" for="lead">
        <input type="radio" name="options" id="lead" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Lead Generation</span>
      </label>
      <label class="slds-radio" for="education">
        <input type="radio" name="options" id="education" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Education Leads</span>
      </label>
    </div>
  </fieldset>
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="agree">
        <input name="default" type="checkbox" id="agree" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">I agree to the Terms &amp; Service</span>
      </label>
    </div>
  </div>
</div>

To vertically stack <label> and <input> pairs, place .slds-form--stacked on the wrapper of the form for optimal spacing.

Inline FormInline Formdev ready

Preview

Code

<form class="slds-form--inline">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="name">Name</label>
    <div class="slds-form-element__control">
      <input id="name" class="slds-input" type="text" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="email">Email</label>
    <div class="slds-form-element__control">
      <input id="email" class="slds-input" type="text" />
    </div>
  </div>
  <div class="slds-form-element">
    <button type="button" class="slds-button slds-button--brand">Send</button>
  </div>
</form>

To horizontally align form elements on the same axis, use .slds-form--inline on the form wrapper.

Compound FormCompound Formdev ready

Preview

Code

<fieldset class="slds-form--compound">
  <legend class="slds-form-element__label slds-text-title--caps">Location</legend>
  <div class="slds-form-element__group">
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-01">Latitude</label>
        <input id="input-01" class="slds-input" type="text" />
      </div>
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-02">Longitude</label>
        <input id="input-02" class="slds-input" type="text" />
      </div>
    </div>
  </div>
</fieldset>
<fieldset class="slds-form--compound">
  <legend class="slds-form-element__label slds-text-title--caps">Address</legend>
  <div class="slds-form-element__group">
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-1">
        <label class="slds-form-element__label" for="input-03">Street</label>
        <input id="input-03" class="slds-input" type="text" />
      </div>
    </div>
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-04">City</label>
        <input id="input-04" class="slds-input" type="text" />
      </div>
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-05">State</label>
        <input id="input-05" class="slds-input" type="text" />
      </div>
    </div>
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-06">ZIP Code</label>
        <input id="input-06" class="slds-input" type="text" />
      </div>
    </div>
  </div>
</fieldset>

A compound form consists of form groups that are labeled by the <legend> of a <fieldset>. The <fieldset> requires the .slds-form--compound class. By default, the form groups within the fieldset are vertically stacked. To horizontally align the label (for example, <legend class="slds-form-element__label">), use the .slds-form--compound--horizontal class.

A form group needs a containing <div> with the .slds-form-element__group class applied to it. Within .slds-form-element__group you can have multiple rows of compound fields by wrapping a row in a <div> with the .slds-form-element__row class.

Pay close attention to the markup of a form control within a compound field, because it differs slightly from other form elements. A form control can receive a sizing helper class, for example: .slds-size--1-of-3, to modify the width of the input field. See Sizing utilities for more sizing options.

Field Level HelpField Level Helpdev ready

Preview

Code

<div class="slds-form-element">
  <div class="slds-form-element__label">
    <label class="slds-align-middle" for="form-help">Text Label</label>
  </div>
  <div class="slds-form-element__icon">
    <a href="javascript:void(0);">
      <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
      </svg>
      <span class="slds-assistive-text">Help</span>
    </a>
  </div>
  <div class="slds-form-element__control">
    <input id="form-help" class="slds-input" type="text" placeholder="Field Level Help" aria-describedby="help" />
  </div>
</div>
<div id="help" class="slds-popover slds-popover--tooltip slds-nubbin--bottom-left" role="tooltip" aria-live="polite" style="position:absolute;top:15px;left:103px;margin-left:-1rem;width:20rem;">
  <div class="slds-popover__body slds-text-longform">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facere eligendi reiciendis obcaecati.</p>
  </div>
</div>

The popover tooltip should be positioned with JavaScript.

You can include inline help tooltips for form elements. If your tooltips are available on hover, also make sure that they’re available on keyboard focus. To allow screen readers to access the tooltip, the HTML form field element must have an aria-describedby attribute that points to the tooltip ID of the tooltip.

Docked Form FooterDocked Form Footer › DefaultDocked Form Footer › With error(s)Docked Form Footer › With error popoverDocked Form Footerdev ready

Preview

Code

<div class="slds-docked-form-footer">
  <button type="button" class="slds-button slds-button--neutral">Cancel</button>
  <button type="button" class="slds-button slds-button--brand">Save</button>
</div>

The popover should be positioned with JavaScript.

When errors are found within a form, the user will be notified with a popover with the page-level errors listed out. Please provide a contextually specific title for the dialog with the aria-label attribute. e.g. "Acme Global edit form errors"

Component Overview

For optimum spacing and layout, wrap each element in .slds-form-element. Layout helper classes are available through the following class names, .slds-form--stacked, .slds-form--horizontal and .slds-form--inline.

The read-only state is for form elements that can’t be modified. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text.

Because the read-only field state has no <input>, don’t use a <label> to provide better accessibility for screen readers and keyboard navigators. Instead, use a <span> with the .slds-form-element__label class. Instead of an <input>, use the .slds-form-element__static class inside the .slds-form-element__control wrapper.

Every form field requires an associated, non-empty text <label> element, which is linked to the form field either by wrapping the <label> tag around the field or by giving the <label> a for attribute whose value is that input field’s id. This association ensures that assistive technology users can tell what information to enter where.

Error states alert the user when content in the form is invalid. The .slds-has-error class is placed on the <div class=".slds-form-element">. Place the error message for the user in a <span> with the .slds-form-element__help class. The <input> with the error receives an `aria-describedby` attribute that references the ID attribute of the error message in the <span>. This configuration allows screen readers to properly associate the error message with the field.

When an <input> is required, add the HTML attribute required to it.

The native form elements, <input>, <textarea>, <select>, <input type='checkbox'>, and <input type='radio'>, receive validation styling for disabled, checked, and checked disabled, if applicable.

Form Example

Example Form Element Help
Opportunity Owner
Erin Buck
Options
Default

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-form-element
Applied to:

<div>

Outcome:

Initializes form element

Required:

Required

Comments:

--

.slds-form-element__label
Applied to:

<div>

Outcome:

Initializes form element label

Required:

Required

Comments:

--

.slds-form-element__control
Applied to:

<div>

Outcome:

Initializes form element control

Required:

Required

Comments:

Control can contain an <input>, <textarea>, <select>

.slds-form-element__icon
Applied to:

<div>

Outcome:

The icon wrapper for an icon within a form element, this icon is usually used to indicate an error or field level help

Required:

No, optional element or modifier

Comments:

--

.slds-input
Applied to:

<input>

Outcome:

Initializes text input

Required:

Required

Comments:

--

.slds-input--small
Deprecated
Applied to:

.slds-input

Outcome:

Applies styles for a smaller text input

Required:

No, optional element or modifier

Comments:

Removed in version 2.0.0

.slds-input--bare
Applied to:

.slds-input

Outcome:

Removes background and border from text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon
Applied to:

<div> around <input>

Outcome:

Lets text input know how to position .slds-input__icon

Required:

No, optional element or modifier

Comments:

The <div> contains both the <svg> and the <input>

.slds-input__icon
Applied to:

<svg>

Outcome:

Hook for .slds-input-has-icon

Required:

No, optional element or modifier

Comments:

--

.slds-input__icon--left
Applied to:

<svg> or <button>

Outcome:

Hook for .slds-input-has-icon--left-right

Required:

No, optional element or modifier

Comments:

--

.slds-input__icon--right
Applied to:

<svg> or <button>

Outcome:

Hook for .slds-input-has-icon--left-right

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon--left
Applied to:

.slds-input-has-icon

Outcome:

Positions .slds-input__icon to the left of the text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon--right
Applied to:

.slds-input-has-icon

Outcome:

Positions .slds-input__icon to the right of the text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon--left-right
Applied to:

.slds-input-has-icon

Outcome:

Positions .slds-input__icon--left to the left of the text input and .slds-input__icon--right to the right of the text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-fixed-addon
Applied to:

The <div> contains both the .slds-form-element__addon and the <input>

Outcome:

Use on input container to let it know there is fixed text to the left or right of the input

Required:

No, optional element or modifier

Comments:

--

.slds-form-element__addon
Applied to:

any element

Outcome:

Class for fixed text that sits to the left or right of an <input>

Required:

No, optional element or modifier

Comments:

--

.slds-textarea
Applied to:

<textarea>

Outcome:

Initializes textarea

Required:

Required

Comments:

--

.slds-select
Applied to:

<select>

Outcome:

Initializes select

Required:

Required

Comments:

--

.slds-checkbox
Applied to:

<label>

Outcome:

Initializes checkbox

Required:

Required

Comments:

Label wraps the faux checkbox and text, <input> requires [type=checkbox]

.slds-checkbox--faux
Applied to:

<span>

Outcome:

Creates a custom styled checkbox

Required:

Required

Comments:

Apply to <span> inside .slds-checkbox

.slds-checkbox--button-group
Applied to:

<div>

Outcome:

Container for a group of checkbox that look like a button group

Required:

No, optional element or modifier

Comments:

--

.slds-checkbox--button
Applied to:

<label class="slds-button">

Outcome:

Customizes your checkbox to look like a button in a button group

Required:

No, optional element or modifier

Comments:

--

.slds-radio
Applied to:

<label>

Outcome:

Initializes radio button

Required:

Required

Comments:

Label wraps the faux radio and text, <input> requires [type=radio]

.slds-radio--faux
Applied to:

<span>

Outcome:

Creates a custom styled radio button

Required:

Required

Comments:

Apply to <span> inside .slds-radio

.slds-radio--button-group
Applied to:

<div>

Outcome:

Container for a group of radio that look like a button group

Required:

No, optional element or modifier

Comments:

--

.slds-radio--button
Applied to:

<label class="slds-button">

Outcome:

Customizes your radio to look like a button in a button group

Required:

No, optional element or modifier

Comments:

--

.slds-form--horizontal
Applied to:

<form>

Outcome:

Horizontally aligns a single form label and control on the same line

Required:

No, optional element or modifier

Comments:

--

.slds-form--stacked
Applied to:

<form>

Outcome:

Vertically aligns form label and control, provides spacing between form elements

Required:

No, optional element or modifier

Comments:

This is the default

.slds-form--inline
Applied to:

<form>

Outcome:

Horizontally align multiple form elements on the same axis

Required:

No, optional element or modifier

Comments:

--

.slds-form--compound
Applied to:

<form>

Outcome:

Creates a form that consists of multiple form groups

Required:

No, optional element or modifier

Comments:

Groups are placed in fieldsets and small labels are used for inputs

.slds-form-element__row
Applied to:

<div>

Outcome:

Use to create rows of form elements in a compound form

Required:

No, optional element or modifier

Comments:

Wrap form elements in this class

.slds-required
Applied to:

<attr>

Outcome:

Class used on required asterick

Required:

Required

Comments:

--

.slds-has-error
Applied to:

.slds-form-element

Outcome:

Applied to .slds-form-element when form element has errors

Required:

Required

Comments:

--